เพ มภาพตามเน อหาของแต ละบท. Basic of Web Design by Assoc. Prof. Churee Techawut and Dr. Ratsameetip Wita adapted into English by Dr.

Size: px

Start display at page:

Download "เพ มภาพตามเน อหาของแต ละบท. Basic of Web Design by Assoc. Prof. Churee Techawut and Dr. Ratsameetip Wita adapted into English by Dr."

Ethelbert Stewart
6 years ago
Views:

เพ มภาพตามเน อหาของแต ละบท http://highlevelstudios.com/images/basic_design.

1 เพ มภาพตามเน อหาของแต ละบท Basic of Web Design by Assoc. Prof. Churee Techawut and Dr. Ratsameetip Wita adapted into English by Dr. Prakarn Unachak

2 1. Anatomy of a Website 2. Types of Web Pages 3. Steps in Website Design

3 1. Anatomy of a Website 3

4 1. Anatomy of a Website (1) Domain Name: (4) Homepage (3) Web page Web page Web page Web page Web page Web page (2) Website (5) Site Map 4

5 1. Anatomy of a Website (cont.) 1. Domain Name Human-readable, unique name that identifies an entity (such as website) on the Internet. Formed by the rules of Domain Name System (DNS) Example: 2. Web Page Documents readable by web browser Text/image/etc Addressed by URL 3. Website Set of related web pages served from a single domain Hosted on the same (set of) server(s) INFORMATION TECHNOLOGY AND MODERN LIFE I : WEB AUTHORING TOOLS 5

6 1. Anatomy of a Website (cont.) 4. Home Page Usually the first page you ll see on a website. 5. Site map List of pages on a website, and how they are linked together INFORMATION TECHNOLOGY AND MODERN LIFE I : WEB AUTHORING TOOLS 6

7 2. Types of Web Pages 7

8 2. Two Types of Web Pages Static Web Page File delivered as stored Content does not changed unless the stored file changes Written only by Hypertext Markup Language (HTML) Dynamic Web Page Generated by web application Content changes based on user s interaction (and other things) May interact with a database 8

9 Dynamic Web Page Example Contents change on user interaction INFORMATION TECHNOLOGY AND MODERN LIFE I : WEB AUTHORING TOOLS 9

10 Dynamic Web Page Example (2) Google Doodles Time/Location Thai Mother s Day 2014 Valentine 2012 World Cup 2014 Lunar New Year INFORMATION TECHNOLOGY AND MODERN LIFE I : WEB AUTHORING TOOLS 10

11 3. Steps in Website Design 11

12 3.1. Analysis 3.2. Planning 3.3. Design 3.4. Content 3.5. Development 3.6. Testing 3.7. Deployment 3. Steps in Website Design 12

13 3.1. Analysis What do I want with this website? Emphasis on preliminary information gathering Work out: Purpose of the website: what is this website about? Target Audience: who is this website for? Intended Use: how will people be using this website? These information will help you decide/create an appropriate website for your target audience 13

14 3.2. Planning Outline the overall design of the website Sitemap Underlying/developing technology (types of pages, data required, etc.) Decide the structure of website Features A website should not be too complex Determine how information of the website will be connected Group similar information together for ease of navigation 14

15 3.3. Design Maximize usability for the target audience Decide an appropriate page layout Select fitting fonts and typography Use the right colors to highlight your contents/ set the right mood. 15

16 3.3.1 Usability Usability is the quality of user experience while they are interacting with the system/ website Usability is the main goal of website design Ideal usability is when user can figure out how to use and navigate the website quickly and painlessly What to do, where to click, etc. User interface is important for this 16

17 3.3.1 Usability (cont.) Ease of Learning Subjective Satisfaction Efficiency of Use Error Frequency Memorability 17

18 3.3.1 Usability (cont.) Ease of learning : user can understand the user interface and can access the information in the website quickly Efficiency of use : user can navigate the website efficiently (least time, least amount of clicks, etc.) Memorability : user can remember our website (preferably fondly, so that they will come back) Error frequency : minimized coding error and Navigation error Subjective satisfaction : maximize user s enjoyment (or at least, minimize user s frustration) in using the website 18

19 3.3.2 Page layout Page layout is planning and allocate areas for different information you want to display on the web pages. You should finish page layout before you start building the website Wireframe model is one of the popular method in page layout The model will simulate how the contents will look on the webpages with boxes with labels No decoration, no look-and-feel Page layouts are usually in grids, as the following examples: 19

20 Layout # Page layout (cont.) LOGO Navigation 20

21 3.3.2 Page layout (cont.) Website with Layout #1 21

22 Layout # Page layout (cont.) LOGO Header / Banner Side Bar Navigation Body Area 22

23 3.3.2 Page layout (cont.) Website with Layout #2 23

24 3.3.2 Page layout (cont.) Layout #3 LOGO Navigation Header / Banner Intro Text Area Box1 Box2 Box3 24

25 3.3.2 Page layout (cont.) Website with Layout #3 25

26 3.3.2 Page layout (cont.) Layout #4 LOGO Navigation Header / Banner Side Bar Body Area 26

27 3.3.2 Page layout (cont.) Website with Layout #4 27

28 3.3.2 Page Layout - Homepage Dimension Homepage contents should not exceed web browser s content area The size of the web page should be smaller than most user s screen Avoid horizontal scrolling Although, some vertical scrolling is fine, the webpage should not be too long Standard web page s width is 800 pixels 28

29 3.3.3 Fonts and Typography The main goal is the readability of contents The fonts should also fit the tone of the website (official/casual) Appropriate Size Font size is in pixels Font s color should stand out from the background Keep effect such as blinking or moving characters to a moderation 29

30 3.3.3 Fonts and typography (cont.) Different fonts can have different feels......and relay different intentions source: reddit 30

31 3.3.3 Fonts and typography (cont.) Font should stand out from the background This applies to other type of presentations, such as Word document or PowerPoint presentations Which one is more comfortable to read? 31

32 3.3.3 Fonts and typography (cont.) Three types of fonts Serif San serif Script 32

33 3.3.3 Fonts - Serif Has small lines at the end of the stroke Usually used in official documents Mostly for headers than contents Example: Time New Roman, Georgia, Book Antiqua Head serif Foot serif 33

34 No Serif Fonts - Sans serif More modern fonts (Usually) Easy to read, appropriate for contents Example: Arial, Tahoma, Calibri 34

35 3.3.3 Fonts - Script Based on handwriting Harder to read Used in casual context Mostly as headers (if at all) Example: Vladimir Script, Freestyle Script 35

36 3.3.4 Color The main goals of using colors To draw user s attention To maintain website s consistency Colors are made of primary colors, one model is RGB: R = RED G = GREEN B = BLUE 36

37 3.3.4 Color - Hex Color Code Or six-digit color code, use to identify RGB colors Consists of 6 hexadecimal digit, whose value can be 0 F (15) (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) So each R, G, B component can represent 256 values # F F F F F F R G B 37

38 3.3.4 Color - Hex Color Code Example: white (#FFFFFF), and black (#000000) 38

39 3.3.4 Color - Color Theme Choice of colors, or color theme, should be: Appropriate for website content and purpose For example, a website for Department of Education should not be too colorful A website for a cinema complex, on the other hand... If the website has a lot of content, the colors choice should make the content easy to read Fit to the organization Organization may already have their color, the website should also use that to increase credibility (What is CMU s color?) 39

40 3.3.4 Color - Color Theme Different colors have different feels Warm and Cool Colors Warm is energetic, stimulating Cool is calming, relaxing Color wheel Used for picking the right color Warm and Cool Colors 40

41 3.3.4 Color - Color Theme Warm and cool colors Monochromatic colors Analogous colors Triad colors Warm and Cool Colors Monochromatic Colors Analogous Colors Triad Colors 41

42 e4b0fc259f094916/ /monochromatic_color_scheme Tints Tones Shades Color Color Theme 42

43 Monochromatic Web Page 43

44 Web Page with Analogous Colors Tori s Eyes: torieyes.quodis.com 44

45 3.4. Content The contents are the most important parts of the website. You need to make sure that the information in the contents has the following properties: Accuracy: you need to make sure that the information is verified to be correct, comes from credible source. Also, make sure the spelling and grammar are correct Timeliness: the information should be up-to-date Coverage (completeness): the information should fit and adequate for the purpose of the website. 45

46 3.4. Content Copywriting Images and Graphics Search Engine Optimization (SEO) 46

47 3.4.1 Copywriting To use other people s contents in your website, you should get their permissions. Also, they should be properly credited Example of such (conditional) permission is Creative Commons license 47

48 3.4.2 Images and graphics The images and other graphical objects should load quickly The file size should not exceed 100 KB For small logo or graphical objects with limited colors, the file size should be about 20 KB Use appropriate file types True color picture: jpeg or jpg Graphical effect: gif or png Make sure to compare file sizes before picking one You can use photo editors such as GIMP, Photoshop or Pixlr to edit the pictures/graphics before using them on the website. 48

49 3.4.2 Images and graphics (cont.) The images and graphical objects should be relevant to the contents Avoid using excessive animation and other effects If you are going to incorporate music into the website, it should 1) NOT start automatically OR 2) There s a button to turn the music off 49

3.4.3 Search Engine Optimization Search engine is a system that gather data about all (listed) web pages on the Internet. This includes how web pages are linked to each other.

50 3.4.3 Search Engine Optimization Search engine is a system that gather data about all (listed) web pages on the Internet. This includes how web pages are linked to each other. Search engine can use such information to help users locate what they are interested in Search engine will have an algorithm that can change information on web pages into search results, ordered in a way that should be useful to the users Search engine examples: /03/search-engines.png 50

51 3.4.3 Search Engine Optimization (cont.) Search Engine Optimization (SEO) is a process that can help a company or an organization to increase their website s visibility on the search engine SEO will make a website appears at top order of the search results. This make it easier for users to see the website The results will be listed on organic search (non-ads) part of the search results More information by googling search engine optimization starter guide 51

3.4.3 Search Engine Optimization (cont.) http://static.googleusercontent.

52 3.4.3 Search Engine Optimization (cont.) 52

53 3.5. Development Web Authoring Tools Web Publishing Services Responsive Web Design 53

54 3.5.1 Web Authoring Tools Tools to create a web page For those with programming background, they can use HTML and CSS to create a web page The alternative is to use WYSIWYG (What You See Is What You Get) web authoring tools, which can be divided into 2 categories Application software such as Adobe Dreamweaver, KompoZer Online service that provide web authoring tools alongside web publishing service. Examples: Google Sites, Wordpress.com, Weebly 54

55 3.5.1 Web authoring tools (cont.) Google Sites Wordpress Blogger Tumblr 55

56 3.5.2 Web Publishing Services Provide web authoring tools, hosting, and (sometime) domain name Included web authoring tools are usually in WYSIWYG Usually provide themes for easy selection of your website s look Can have free & paid versions 56

57 3.5.3 Responsive web design Modern way of website design to display contents Design for webpages to display on different devices (screen sizes) with automatic adjustment 57

3.6. Testing There are a few steps in preliminary website testing: Technical testing: checking the navigations that all clicks will take you to the correct destinations

58 3.6. Testing There are a few steps in preliminary website testing: Technical testing: checking the navigations that all clicks will take you to the correct destinations and/or actions Browser compatibility: can the web pages be display correctly on all browsers Goal accomplishment: check that the contents fit the purposes of the website 58

59 3.7. Deployment When you distribute the website for actual use, you should also do: Have a way of monitoring to watch over all workings of the website and a way for users to submit error report When errors are detected, perform bug fixes to fix those errors Also, regularly perform maintenance, not only to make sure the website works correctly, but to make sure the information on the website remain correct, timely and complete 59

By Dr. Ratsameetip Wita. Adapted to English by Prakarn Unachak

By Dr. Ratsameetip Wita. Adapted to English by Prakarn Unachak By Dr. Ratsameetip Wita Adapted to English by Prakarn Unachak 1 (3) Homepage (1) Domain Name: www.example.com (4) Web page Web page Web page Web page Web page Web page (2) Website (5) Site Map 2 Domain